<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器(四)——ID选择器</title>
</head>
<body>
    <fieldset>
        <legend>jQuery ID选择器示例</legend>
        <form id="userForm">
            用户名：<input type="text" id="userName" name="username"  placeholder="请输入用户名"><br/>
            密码：<input type="password" id="pwd" name="password"  placeholder="请输入密码"><br/>
            隐藏域(看不见的)：<input type="hidden" id="realName" name="name" placeholder="隐藏域" value="NYL"><br/>
            用户头像：<input type="file" placeholder="上传头像" id="headImage" name="uerImg"><br/>
            用户描述：<textarea placeholder="请输入用户描述" rows="5" cols="22" id="desc" name="userDesc"></textarea><br/>
            所在省份：
            <select id="fromProvince" style="width: 200px;" name="province">
                <option value="广东省">广东省</option>
                <option value="广西壮族自治区">广西壮族自治区</option>
                <option value="湖南省">湖南省</option>
            </select>
            <br/>
            工作过的城市：
            <select multiple="multiple" id="workCity" style="width: 200px;" name="cityList">
                <option value="3">广州</option>
                <option value="4">深圳</option>
                <option value="5">南宁</option>
                <option value="6">北京</option>
                <option value="7">长沙</option>
            </select>
            <br/>
            性别：
            <input type="radio" placeholder="单选按钮1" name="sex" value="男">男
            <input type="radio" placeholder="单选按钮2" name="sex" value="女">女
            <br/>
            兴趣爱好：
            <input type="checkbox" value="玩电脑" name="interest">玩电脑
            <input type="checkbox" value="打篮球" name="interest">打篮球
            <input type="checkbox" value="踢足球" name="interest">踢足球
            <br/>
            <input type="button" id="btnSave" value="保存">
        </form>
    </fieldset>
</body>
<!--引入jQuery的js文件-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    /**
     * $(function(){
         *      //页面加载完成后的处理，固定写法
         * });
     *
     */
    $(function () {
        //jQuery ID选择器的用法：$("#元素ID");//固定写法
        //使用jQuery获取id为btn的按钮并绑定点击事件
       $("#btnSave").on("click",function () {
           var data={};
           //通过jQuery的ID选择器获取id为userName的输入框，$("#userName")等同于原生js的document.getElementById("userName")的这种写法
           var userNameInput = $("#userName");
           //var userNameInput = document.getElementById("userName");//原生Js通过Id获取元素的写法
           var userName = userNameInput.val();//获取id为userName的输入框的值，等同于原生js的userNameInput.value这种写法
           var pwd = $("#pwd").val();//获取id为pwd的密码框的值
           var realName = $("#realName").val();//获取id为realName的隐藏域的值
           var headImage =  $("#headImage").val();//获取id为headImage的文件上传框的值
           var desc = $("#desc").val();//获取id为desc的文本域输入的值
           var fromProvince = $("#fromProvince").val();//获取id为fromProvince的单选下拉框选择的选项的值
           var workCity = $("#workCity").val();//获取id为workCity的多选下拉框选择的选项的值
           //var sexRadio = $('#userForm input[name="sex"]');//获取id为userForm的表单里面名字为sex的一组单选按钮
           var sex = $('input[name="sex"]:checked').val();//获取性别单选框选中的值，获取方式比较特殊，不能通过ID获取，只能通过名字获取
           //var sex = $('#userForm input[name="sex"]:checked').val();//获取ID为userForm的表单中名字为name的单选框选中的值，获取方式比较特殊，不能通过ID获取，只能通过名字获取
           //var sex =$('input:radio:checked').val();//下面这种方式也可以获取到单选框的值
           //var sex =$('#userForm input:radio:checked').val();//下面这种方式也可以获取到单选框的值，获取ID为userForm的表单中的单选框选中的值
           var interestVals = "";//获取兴趣爱好复选框选中的值，获取方式比较特殊，不能通过ID获取，只能通过名字获取
           $("input:checkbox[name='interest']:checked").each(function(i,item) {
               interestVals += $(item).val() + ",";
           });
           var strLength = interestVals.length;//获取字符串的长度
           interestVals = interestVals.substring(0,strLength-1);//截取掉最后一个逗号
            
          /* var arr = new Array();//使用一个数组存放用户选中的值
           $("input:checkbox[name='interest']:checked").each(function(i,item) {
               arr[i]= $(item).val();
           });
           var interestVals = arr.join(",");//将数组按逗号分隔
*/
           data.userName = userName;
           data.pwd = pwd;
           data.realName = realName;
           data.headImage = headImage;
           data.desc = desc;
           data.fromProvince = fromProvince;
           data.workCity = workCity;
           data.sex = sex;
           data.interest = interestVals;
           console.log("用户输入的内容：");
           console.log(data);

           console.log("使用jQuery提供的serialize()方法获取表单输入项的内容：");
           var param = $("#userForm").serialize();//$("#userForm").serialize()获取id为userForm的表单输入项的内容
           console.log(param);
       });
    });
</script>
</html>